<?php echo $header;
function renderCategory($categories, $level = 0){
$str = "";
$str .= "<ol class='level".$level."'>";
$i = 1;
foreach ($categories as $category) {
$str .= "<li class='list-content-item' data-id='". $category['category_id'] . "' data-level='". $category['level'] . "'>"
. "<div class='clear-both'>"
. "<span class='center col-md-1'>"
. "<input type='checkbox' name='selected[]' value='" . $category["category_id"] . "'/>"
. "</span>"
. "<span class='left col-md-8'>". $category['name'] . "</span>"
. "<span class='right col-md-3'>";
foreach ($category['action'] as $action) {
$str .= "<a href='". $action["href"] . "'>" . $action["text"] . "</a>";
}
$str .= "</span>"
. "</div>";
if(count($category['child'] != 0)){
$str .= renderCategory($category['child'], $level + 1);
}
$str .= "</li>";
$i++;
}
$str .= "</ol>";
return $str;
}
$str = renderCategory($categories);
?>
<script>
    $(document).ready(function() {
        var updateUrl = '<?php echo $update; ?>';
        var page = '<?php echo $page; ?>';
        $('#updateBt').click(function() {
            var tb = $('.list-content-item');
            var list = new Array();
            var level = 0;
            var pt = {};
            for (var x = 0; x < tb.length; x++) {
                level = getLevel($('#nested'), $(tb[x]));
                pt = getPathId($(tb[x]), level);
                list.push({
                    id: $(tb[x]).attr('data-id'),
                    lv: level,
                    pr: getParentId($(tb[x])),
                    pt: pt
                });
            }
            $.ajax({
                url: updateUrl,
                data: {
                    list: list,
                    p: page,
                    token: $.cookie('token')
                },
                success: function(res) {
                    window.location.reload();
                }
            });
        });
        // var list = $('.level1').children();
        $('.level0').nestedSortable({
            forcePlaceholderSize: true,
            handle: 'div',
            helper: 'clone',
            items: 'li',
            opacity: .6,
            placeholder: 'placeholder',
            revert: 250,
            tabSize: 25,
            tolerance: 'pointer',
            toleranceElement: '> div',
            maxLevels: 3,
            isTree: true,
            expandOnHover: 700,
            startCollapsed: true
        });
        function getLevel(par, obj) {
            var i = 1;
            while (obj.parents().eq(i)[0] !== par[0]) {
                i = i + 2;
            }
            return Math.floor(i / 2);
        }
        function getParentId(obj) {
            return obj.parents().eq(1).attr('data-id') || 0;
        }
        function getPathId(obj, level) {
            var l = (level - 1) * 2 + 1;
            return {
                pt1: obj.parents().eq(3).attr('data-id'),
                pt2: obj.parents().eq(1).attr('data-id')
            };
        }
    });
</script>
<style>
    ul, li{
        list-style: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .ui-sortable li{
        margin: 5px 0 0 0;
        padding: 0;
    }
    .ui-sortable li div  {
        border: 1px solid #d4d4d4;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        border-color: #D4D4D4 #D4D4D4 #BCBCBC;
        margin: 0;
        height: 30px;
        line-height: 30px;
        cursor: move;
        background: #f6f6f6;
        background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
        background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
        background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
        background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
        background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    }
    .clear-both{
        clear: both;
    }
    .list-header{
        width: 100%;
        padding: 0;
        margin: 0;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        background: #00f;
        color: #FFF;
    }
    .list-header .list-header-item{
        float: left;
        padding: 0;
    }
    .list-header .list-header-item:nth-last-child(1){
        padding-right: 10px;
    }
    .list-content{
        padding: 0;
        margin: 0;
        clear: both;
    }
    .list-content .list-content-item{
        width: 100%;
        min-height: 30px;
        clear: both;
    }
    .level0{
        margin: 0;
        padding: 0;
    }
    .clear-both .center,.clear-both .left{
        padding: 0;
    }
    .clear-both .right{
        padding: 0;
        padding-right: 10px;
    }
    .placeholder {
        outline: 1px dashed #4183C4;
        /*-webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin: -1px;*/
    }

    .mjs-nestedSortable-error {
        background: #fbe3e4;
        border-color: transparent;
    }
</style>
<div id="content">
    <div class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb) { ?>
        <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
        <?php } ?>
    </div>
    <?php if ($error_warning) { ?>
    <div class="warning"><?php echo $error_warning; ?></div>
    <?php } ?>
    <?php if ($success) { ?>
    <div class="success"><?php echo $success; ?></div>
    <?php } ?>
    <div class="box">
        <div class="heading">
            <h1><img src="view/image/category.png" alt="" /> <?php echo $heading_title; ?></h1>
            <div class="buttons">
                <button class="button" id="updateBt">Update</button>
                <a href="<?php echo $repair; ?>" class="button">
                    <?php echo $button_repair; ?>
                </a>
                <a href="<?php echo $insert; ?>" class="button">
                    <?php echo $button_insert; ?>
                </a>
                <a onclick="$('#form').submit();" class="button">
                    <?php echo $button_delete; ?>
                </a>
            </div>
        </div>
        <div class="content">
            <form action="<?php echo $delete; ?>" method="post" enctype="multipart/form-data" id="form">
                <div class="list">
                    <ul class="list-header">
                        <li class="center list-header-item col-md-1">
                            <input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" />
                        </li>
                        <li class="left list-header-item col-md-8"><?php echo $column_name; ?></li>
                        <li class="right list-header-item col-md-3"><?php echo $column_action; ?></li>
                    </ul>
                    <div class="clear-both"></div>
                    <div id="nested">
                        <?php echo $str;?>
                    </div>
                </div>
            </form>
            <!--<div class="pagination"><?php //echo $pagination; ?></div>-->
        </div>
    </div>
</div>
<?php echo $footer; ?>